<template>
  <div class="settings">
    <van-dialog
      v-model:show="confirmPasswordDialogShow"
      title="请输入密码"
      :show-cancel-button="true"
      :before-close="confirmPasswordBeforeClose"
      :confirm-button-text="confirmButtonText"
      :confirm-button-disabled="confirmButtonDisabled"
    >
      <van-field v-model="form.account.account" label="账号：" disabled />
      <van-field v-model="confirmPassword" label="密码：" placeholder="请输入密码" />
    </van-dialog>
    <div class="header">
      <div class="left">设置</div>
      <img src="@/assets/img/fork.svg" class="right" @click="settingCancel" />
    </div>
    <van-form required="auto" label-width="3rem" ref="submitForm">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="用户信息" name="0">
          <van-field
            v-model="form.account.account"
            label="账号"
            :rules="[{ required: true, message: '请填写账号' }]"
          />
          <van-field
            v-model="form.account.password"
            type="password"
            label="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-collapse-item>
        <van-collapse-item title="摄像头1" name="1">
          <van-field
            v-model="form.camera1.ip"
            type="text"
            label="IP"
            :rules="[{ required: true, message: '请填写IP' }]"
          />
          <van-field
            v-model="form.camera1.password"
            type="text"
            label="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field v-model="form.camera1.type" type="text" label="品牌">
            <template #input>
              <van-radio-group v-model="form.camera2.type" direction="horizontal">
                <van-radio name="1">大华</van-radio>
                <van-radio name="2">海康</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-collapse-item>
        <van-collapse-item title="摄像头2" name="2">
          <van-field
            v-model="form.camera2.ip"
            type="text"
            label="IP"
            :rules="[{ required: true, message: '请填写IP' }]"
          />
          <van-field
            v-model="form.camera2.password"
            type="text"
            label="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field v-model="form.camera2.type" type="text" label="品牌">
            <template #input>
              <van-radio-group v-model="form.camera2.type" direction="horizontal">
                <van-radio name="1">大华</van-radio>
                <van-radio name="2">海康</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-collapse-item>
        <van-collapse-item title="地磅" name="3">
          <van-field label="单位">
            <template #input>
              <van-radio-group v-model="form.pound.weightType" direction="horizontal">
                <van-radio name="0">吨</van-radio>
                <van-radio name="1">千克</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form.pound.ip"
            label="ip"
            type="text"
            :rules="[{ required: true, message: '请填写ip' }]"
          >
          </van-field>

          <van-field
            v-model="form.pound.port"
            label="端口"
            type="text"
            :rules="[{ required: true, message: '请填写端口' }]"
          >
          </van-field>
          <van-field
            v-model="form.pound.dataLength"
            label="数据长度"
            type="text"
            :rules="[{ required: true, message: '请填写数据长度' }]"
          >
          </van-field>

          <van-field
            v-model="form.pound.dataStart"
            label="数据起始位"
            type="text"
            :rules="[{ required: true, message: '请填写数据起始位' }]"
          >
          </van-field>
          <van-field
            v-model="form.pound.dataEnd"
            label="数据结束位"
            type="text"
            :rules="[{ required: true, message: '请填写数据结束位' }]"
          >
          </van-field>
          <van-field label="读数反转">
            <template #input
              ><van-radio-group v-model="form.pound.reverse" direction="horizontal">
                <van-radio name="1">反转</van-radio>
                <van-radio name="0">不反转</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label="异或校验">
            <template #input
              ><van-radio-group v-model="form.pound.check" direction="horizontal">
                <van-radio name="1">校验</van-radio>
                <van-radio name="0">不校验</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
            v-model="form.pound.checkDataStart"
            label="校验读数起始位"
            type="text"
            :rules="[{ required: true, message: '请填写校验读数起始位' }]"
          >
          </van-field>
          <van-field
            v-model="form.pound.checkDataEnd"
            label="校验读数结束位"
            type="text"
            :rules="[{ required: true, message: '请填写校验读数结束位' }]"
          >
          </van-field>
          <van-field
            v-model="form.pound.checkValueStart"
            label="校验值起始位"
            type="text"
            :rules="[{ required: true, message: '请填写校验值起始位' }]"
          >
          </van-field>
          <van-field
            v-model="form.pound.checkValueEnd"
            label="校验值结束位"
            type="text"
            :rules="[{ required: true, message: '请填写校验值结束位' }]"
          >
          </van-field>
        </van-collapse-item>
        <van-collapse-item title="打印机" name="4">
          <!-- 1 横版 直接打字符串 2 竖版 跳转页面打印截屏 -->
          <van-field v-model="form.print.type" label="打印机类型">
            <template #input>
              <van-radio-group v-model="form.print.type" direction="horizontal">
                <van-radio name="1">横版</van-radio>
                <van-radio name="2">竖版</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-collapse-item>

        <van-collapse-item title="车牌识别" name="5">
          <van-field v-model="form.carNumberOcr.enabled" label="是否启用">
            <template #input>
              <van-radio-group v-model="form.carNumberOcr.enabled" direction="horizontal">
                <van-radio name="0">禁用</van-radio>
                <van-radio name="1">启用</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form.carNumberOcr.weightThreshold"
            label="重量阈值"
            type="text"
            :rules="[{ required: true, message: '请填写重量阈值' }]"
          >
          </van-field>

          <van-field
            v-model="form.carNumberOcr.cropStartX"
            label="裁剪横坐标"
            type="text"
            :rules="[{ required: true, message: '请填写裁剪横坐标' }]"
          >
          </van-field>

          <van-field
            v-model="form.carNumberOcr.cropStartY"
            label="裁剪纵坐标"
            type="text"
            :rules="[{ required: true, message: '请填写裁剪纵坐标' }]"
          >
          </van-field>

          <van-field
            v-model="form.carNumberOcr.cropWidth"
            label="裁剪宽度"
            type="text"
            :rules="[{ required: true, message: '请填写裁剪宽度' }]"
          >
          </van-field>

          <van-field
            v-model="form.carNumberOcr.cropHeight"
            label="裁剪高度"
            type="text"
            :rules="[{ required: true, message: '裁剪高度' }]"
          >
          </van-field>
          <van-field v-model="form.carNumberOcr.hasIcReader" label="是否读IC卡">
            <template #input>
              <van-radio-group v-model="form.carNumberOcr.hasIcReader" direction="horizontal">
                <van-radio name="0">禁用</van-radio>
                <van-radio name="1">启用</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-collapse-item>
      </van-collapse>
    </van-form>
    <div class="footer">
      <div class="submit btn" @click="submit">提交</div>
      <div class="cancel btn" @click="checkUpdate">检查更新</div>
    </div>
  </div>
</template>
<script setup>
import api from '@/api/index'
import { showConfirmDialog, showDialog, showToast } from 'vant'
import { reactive, onMounted, ref } from 'vue'
//马银 12 1，9 9，11 不反转 要校验
const form =
  import.meta.env.MODE === 'formal'
    ? reactive({
        account: {
          account: 'YTJ_0001',
          password: '123qwe'
        },
        camera1: {
          ip: '192.168.1.220',
          password: 'hubao123',
          type: '2'
        },
        camera2: {
          ip: '192.168.1.222',
          password: 'hubao123',
          type: '2'
        },
        pound: {
          weightType: '1',
          ip: '192.168.1.200',
          port: '1000',
          dataLength: '12',
          dataStart: '1',
          dataEnd: '8',
          reverse: '0',
          check: '0',
          checkDataStart: '0',
          checkDataEnd: '0',
          checkValueStart: '0',
          checkValueEnd: '0'
        },
        print: {
          type: '1'
        },
        carNumberOcr: {
          enabled: '1',
          weightThreshold: '0.01',
          cropStartX: '20',
          cropStartY: '30',
          cropWidth: '320',
          cropHeight: '300',
          hasIcReader: '1'
        }
      })
    : reactive({
        account: {
          account: 'YTJ001',
          password: '123456'
        },
        camera1: {
          ip: '192.168.2.7',
          password: 'ghj890926',
          type: '1'
        },
        camera2: {
          ip: '192.168.2.55',
          password: 'ghj890926',
          type: '2'
        },
        pound: {
          weightType: '1',
          ip: '192.168.2.100',
          port: '8000',
          dataLength: '8',
          dataStart: '1',
          dataEnd: '8',
          reverse: '1',
          check: '0',
          checkDataStart: '0',
          checkDataEnd: '0',
          checkValueStart: '0',
          checkValueEnd: '0'
        },
        print: {
          type: '1'
        },
        carNumberOcr: {
          enabled: '1',
          weightThreshold: '0.001',
          cropStartX: '0',
          cropStartY: '0',
          cropWidth: '640',
          cropHeight: '480',
          hasIcReader: '1'
        }
      })
const activeNames = ref([])
const confirmPasswordDialogShow = ref(false)
const confirmPassword = ref('')
const confirmButtonText = ref('确认')
const confirmButtonDisabled = ref(false)

onMounted(() => {
  if (localStorage.settings) {
    const temp = JSON.parse(localStorage.settings)
    for (const key in form) {
      if (temp[key]) {
        form[key] = temp[key]
      }
    }
    confirmPasswordDialogShow.value = true
    confirmPassword.value = ''
  }
})
function settingCancel() {
  window.android.settingCancel()
}
async function confirmPasswordBeforeClose(action) {
  if (action === 'cancel') {
    window.android.settingCancel()
    return true
  }
  confirmButtonDisabled.value = true
  confirmButtonText.value = '提交中...'
  try {
    await api.login({
      account: form.account.account,
      password: confirmPassword.value,
      platform: 'ytj'
    })
  } catch (e) {
    return false
  } finally {
    confirmButtonDisabled.value = false
    confirmButtonText.value = '确认'
  }
  return true
}
const submitForm = ref(null)
async function submit() {
  await submitForm.value.validate()
  await api.login({
    account: form.account.account,
    password: form.account.password,
    platform: 'ytj'
  })
  localStorage.settings = JSON.stringify(form)
  setTimeout(() => {
    const toast = showToast({
      type: 'loading',
      message: '保存中',
      forbidClick: true,
      overlay: true,
      duration: 0
    })
    setTimeout(() => {
      toast.close()
      window.android.submit(
        form.cameraIp1,
        form.cameraPassword1,
        form.cameraIp2,
        form.cameraPassword2,
        form.poundWeightType
      )
    }, 3000)
  })
}
async function checkUpdate() {
  const versionRes = await api.getLatestAndroidVersion()
  const versionName = versionRes.data.elements[0].versionName
  if (versionName !== window.android.getVersionName()) {
    showConfirmDialog({
      title: '更新提示',
      message: `当前版本${window.android.getVersionName()},最新版本${versionName}，是否更新`
    })
      .then(() => {
        window.android.downloadApk(import.meta.env.VITE_FILE_DOMAIN + 'android/app-release.apk')
      })
      .catch(() => {
        // on cancel
      })
  } else {
    showDialog({
      message: '当前已是最新版本'
    }).then(() => {
      // on close
    })
  }
}
</script>
<style lang="scss" scoped>
@import url('@/assets/style/mixins.scss');
.settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  .van-form {
    flex: 1;
    overflow-y: auto;
  }
  .van-cell {
    border-bottom: 1px solid #666;
  }
  .submit-btn {
    margin-top: 20px;
    width: 80%;
    margin-left: 10%;
  }
}
</style>
